import React, { useState } from 'react';
import {
  Card,
  Form,
  Input,
  Switch,
  Button,
  Select,
  InputNumber,
  Typography,
  Space,
  Row,
  Col,
  message,
  Descriptions,
} from 'antd';
import {
  SettingOutlined,
  SaveOutlined,
  ReloadOutlined,
  GlobalOutlined,
  SecurityScanOutlined,
  MailOutlined,
  CheckCircleOutlined,
} from '@ant-design/icons';

const { Title, Text } = Typography;
const { TextArea } = Input;
const { Option } = Select;

const PlatformSettingsPage: React.FC = () => {
  const [loading, setLoading] = useState(false);
  const [form] = Form.useForm();

  // 简化的配置数据
  const [settings, setSettings] = useState({
    platformName: 'CatCloud平台',
    platformDescription: '企业级多租户云平台解决方案',
    adminEmail: 'admin@catcloud.com',
    maxTenants: 1000,
    enableRegistration: true,
    enableTwoFactor: true,
    sessionTimeout: 30,
    smtpHost: 'smtp.gmail.com',
    smtpPort: 587,
    enableNotification: true,
  });

  const handleSave = async () => {
    try {
      setLoading(true);
      const values = await form.validateFields();
      
      setSettings(prev => ({ ...prev, ...values }));
      message.success('配置保存成功');
    } catch (error) {
      console.error('保存失败:', error);
      message.error('保存失败，请检查表单');
    } finally {
      setLoading(false);
    }
  };

  const handleReset = () => {
    form.resetFields();
    message.info('表单已重置');
  };

  return (
    <div>
      {/* 页面标题 */}
      <div style={{ marginBottom: 24, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div>
          <Title level={4} style={{ margin: 0, display: 'flex', alignItems: 'center', color: '#262626' }}>
            <SettingOutlined style={{ marginRight: 8, color: '#1890ff' }} />
            系统配置
          </Title>
          <Text type="secondary">管理平台核心配置和系统参数</Text>
        </div>
        <Button 
          icon={<ReloadOutlined />} 
          onClick={() => window.location.reload()}
          style={{ borderRadius: 6 }}
        >
          刷新
        </Button>
      </div>

      {/* 配置表单 */}
      <Card style={{ borderRadius: 8 }}>
        <Form
          form={form}
          layout="vertical"
          initialValues={settings}
          onFinish={handleSave}
        >
          {/* 基本信息 */}
          <div style={{ marginBottom: 32 }}>
            <Title level={5} style={{ 
              marginBottom: 16, 
              display: 'flex', 
              alignItems: 'center',
              color: '#262626'
            }}>
              <GlobalOutlined style={{ marginRight: 8, color: '#52c41a' }} />
              基本信息
            </Title>
            
            <Row gutter={24}>
              <Col span={12}>
                <Form.Item
                  name="platformName"
                  label="平台名称"
                  rules={[{ required: true, message: '请输入平台名称' }]}
                >
                  <Input placeholder="请输入平台名称" />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                  name="adminEmail"
                  label="管理员邮箱"
                  rules={[
                    { required: true, message: '请输入管理员邮箱' },
                    { type: 'email', message: '请输入有效的邮箱地址' },
                  ]}
                >
                  <Input placeholder="admin@catcloud.com" />
                </Form.Item>
              </Col>
            </Row>

            <Form.Item
              name="platformDescription"
              label="平台描述"
            >
              <TextArea
                placeholder="请输入平台描述"
                rows={3}
              />
            </Form.Item>

            <Row gutter={24}>
              <Col span={12}>
                <Form.Item
                  name="maxTenants"
                  label="最大租户数"
                  rules={[{ required: true, message: '请输入最大租户数' }]}
                >
                  <InputNumber
                    min={1}
                    max={10000}
                    style={{ width: '100%' }}
                    placeholder="1000"
                  />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                  name="enableRegistration"
                  label="开放注册"
                  valuePropName="checked"
                >
                  <Switch checkedChildren="开启" unCheckedChildren="关闭" />
                </Form.Item>
              </Col>
            </Row>
          </div>

          {/* 安全设置 */}
          <div style={{ marginBottom: 32 }}>
            <Title level={5} style={{ 
              marginBottom: 16, 
              display: 'flex', 
              alignItems: 'center',
              color: '#262626'
            }}>
              <SecurityScanOutlined style={{ marginRight: 8, color: '#fa8c16' }} />
              安全设置
            </Title>
            
            <Row gutter={24}>
              <Col span={12}>
                <Form.Item
                  name="enableTwoFactor"
                  label="双重验证"
                  valuePropName="checked"
                >
                  <Switch checkedChildren="开启" unCheckedChildren="关闭" />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                  name="sessionTimeout"
                  label="会话超时（分钟）"
                  rules={[{ required: true, message: '请输入会话超时时间' }]}
                >
                  <InputNumber
                    min={5}
                    max={480}
                    style={{ width: '100%' }}
                    placeholder="30"
                  />
                </Form.Item>
              </Col>
            </Row>
          </div>

          {/* 邮件设置 */}
          <div style={{ marginBottom: 32 }}>
            <Title level={5} style={{ 
              marginBottom: 16, 
              display: 'flex', 
              alignItems: 'center',
              color: '#262626'
            }}>
              <MailOutlined style={{ marginRight: 8, color: '#722ed1' }} />
              邮件设置
            </Title>
            
            <Row gutter={24}>
              <Col span={12}>
                <Form.Item
                  name="smtpHost"
                  label="SMTP服务器"
                  rules={[{ required: true, message: '请输入SMTP服务器' }]}
                >
                  <Input placeholder="smtp.gmail.com" />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                  name="smtpPort"
                  label="SMTP端口"
                  rules={[{ required: true, message: '请输入SMTP端口' }]}
                >
                  <InputNumber
                    min={1}
                    max={65535}
                    style={{ width: '100%' }}
                    placeholder="587"
                  />
                </Form.Item>
              </Col>
            </Row>

            <Form.Item
              name="enableNotification"
              label="邮件通知"
              valuePropName="checked"
            >
              <Switch checkedChildren="开启" unCheckedChildren="关闭" />
            </Form.Item>
          </div>

          {/* 操作按钮 */}
          <Form.Item>
            <Space>
              <Button
                type="primary"
                htmlType="submit"
                icon={<SaveOutlined />}
                loading={loading}
                style={{ borderRadius: 6 }}
              >
                保存配置
              </Button>
              <Button 
                onClick={handleReset}
                style={{ borderRadius: 6 }}
              >
                重置
              </Button>
            </Space>
          </Form.Item>
        </Form>
      </Card>

      {/* 系统状态信息 */}
      <Card 
        title={
          <Space>
            <CheckCircleOutlined style={{ color: '#52c41a' }} />
            系统状态
          </Space>
        }
        style={{ marginTop: 24, borderRadius: 8 }}
      >
        <Descriptions column={3} size="small">
          <Descriptions.Item label="系统版本">v3.0.1</Descriptions.Item>
          <Descriptions.Item label="运行状态">
            <Text type="success">正常运行</Text>
          </Descriptions.Item>
          <Descriptions.Item label="最后更新">2024-01-20 10:30:00</Descriptions.Item>
          <Descriptions.Item label="当前租户数">156</Descriptions.Item>
          <Descriptions.Item label="活跃用户数">2,847</Descriptions.Item>
          <Descriptions.Item label="存储使用量">45.2 GB</Descriptions.Item>
        </Descriptions>
      </Card>
    </div>
  );
};

export default PlatformSettingsPage;